<template>
  <div class="bg" :style="getBgStyle()">
    <div class="x"></div>
    <div class="y"></div>
    <div class="center"></div>
    <div
        class="list"
        v-for="(item, index) in list"
        :key="index"
        :style="getStyle(item)"
    >
      <div :style="getLineStyle(item)"></div>
      {{ item.tail }}
    </div>
  </div>
</template>

<script>

export default {
  props: {
    list: { type: Array, default: [] },
    width: { type: Number, default: 500 },
    height: { type: Number, default: 500 },
    top: { type: Number, default: 0 },
    left: { type: Number, default: 0 },
    xLength: { type: Number, default: 2500 },
    yLength: { type: Number, default: 2200 },
    layoutType: {
      type: String,
      default: 'MODEL',
    },
  },
  methods: {
    getBgStyle() {
      return {
        width: this.width + "px",
        height: this.height + "px",
        top: this.top + "px",
        left: this.left + "px",
      };
    },
    getStyle(item) {
      let xArr = item.area.map((item) => item.x);
      let yArr = item.area.map((item) => item.y);
      // 找到左上角
      let minX = Math.min(...xArr);
      let maxY = Math.max(...yArr);
      let left = ((this.xLength / 2 + Number(minX)) / this.xLength) * 100 + "%";
      let top = ((this.yLength / 2 - Number(maxY)) / this.yLength) * 100 + "%";
      let width = 0;
      let height = 0;
      let first = item.area[0];
      let third = item.area[2];
      width = Math.abs((Number(first.x) - Number(third.x)) / this.xLength) * 100 + "%";
      height = Math.abs((Number(first.y) - Number(third.y)) / this.yLength) * 100 + "%";
      return {
        position: "absolute",
        left,
        top,
        width,
        height,
      };
    },
    getLineStyle(item) {
      if (this.layoutType === "MODEL") {
        return {
          position: 'absolute',
          top: '7%',
          width: '100%',
          'border-top': '1px solid black',
        }
      }
      const line = {
        position: "absolute"
      };
      let xArr = new Set()
      let yArr = new Set()
      item.area.map((item) => {
        xArr.add(Number(item.x))
        yArr.add(Number(item.y))
      });
      xArr = Array.from(xArr).sort((a, b) => a - b);
      yArr = Array.from(yArr).sort((a, b) => b - a);
      if (xArr.length === 2) {
        line["border-top"] = "1px solid black"
        line["top"] = ((yArr[1] - yArr[0]) / (yArr[2] - yArr[0])) * 100 + "%"
        line["width"] = "100%"
      } else {
        line["border-left"] ="1px solid black"
        line["left"] = ((xArr[1] - xArr[0]) / (xArr[2] - xArr[0])) * 100 + "%"
        line["height"] = "100%"
      }
      return line
    },
  },
};
</script>

<style lang="stylus" scoped>
.bg {
  border: 1px solid blue;
  position: absolute;

  .center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: red;
    border-radius 100% 100%
  }

  .list {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid black;
    font-size: 20px;
    font-weight: bold;
    color: #999;
    .line {
      position absolute;
      top: 7%;
      width 100%;
      border-top: 1px solid black;
    }
  }

  .x {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    width: 100%;
    height: 1px;
    background: repeating-linear-gradient(to right, #ccc, #ccc 5px, transparent 5px, transparent 10px);
  }

  .y {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    width: 1px;
    height: 100%;
    background: repeating-linear-gradient(to bottom, #ccc, #ccc 5px, transparent 5px, transparent 10px);
  }
}
</style>
